<script setup>
import {useRouter} from "vue-router";
import {getActualOutPutListApi, getAllBannerApi, getBannerListApi, getGraduatedListApi} from "@/api/school.js";
import {onMounted} from "vue";
import {formatDate, formatDateNoTime} from "../../utils/index.js";
import {listNotice} from "@/api/system/notice.js";

const router = useRouter()

const state = reactive({
  bannerList: [],
  dataList1: [],
  dataList2: [],
  dataList3: []
})
const handleLogin = () => {
  router.push('login')
}


const getBannerList = async () => {
  const res = await getAllBannerApi()
  if (res.code == 200) {
    state.bannerList = res.data
  }
}

const getRealUrl = (src) => {
  return import.meta.env.VITE_APP_BASE_API + src;
}

const getDataList1 = async () => {
  const res = await getActualOutPutListApi({
    pageSize: 6,
    pageNum: 1
  })
  if (res.code == 200) {
    state.dataList1 = res.rows
  }
}

const getDataList2 = async () => {
  const res = await listNotice({
    pageSize: 6,
    pageNum: 1
  })
  if (res.code == 200) {
    state.dataList2 = res.rows
  }
}

const getDataList3 = async () => {
  const res = await getGraduatedListApi({
    pageSize: 6,
    pageNum: 1
  })
  if (res.code == 200) {
    state.dataList3 = res.rows
  }
}

onMounted(() => {
  getBannerList()
  getDataList1()
  getDataList2()
  getDataList3()
})
</script>

<template>
  <div class="header">
    <div class="w1200">
      <div class="logo">
        <img src="@/assets/images/logo.png">
      </div>
      <div class="btns">
        <div class="btn" @click="handleLogin">登录</div>
      </div>
    </div>
  </div>
  <div class="banner w1200">
    <el-carousel height="400px">
      <el-carousel-item v-for="item in state.bannerList">
        <div class="bannerImg">
          <img :src="getRealUrl(item.bannerUrl)">
          <div class="tip" v-if="item.bannerTitle">{{ item.bannerTitle }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="content w1200">
    <div class="item">
      <div class="title">
        <p>优秀毕业生</p>
<!--        <div class="more">More >></div>-->
      </div>
      <div class="cont cont2">
        <div class="text">
          <ul>
            <li v-for="item in state.dataList3">
              <p>学生：{{item.stuName}}</p>
              <p>学院：{{item.stuFaculties}}</p>
              <p>班级：{{item.stuClass}}</p>
              <p>毕业时间：{{item.stuGradYear}}</p>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div class="items">
      <div class="item">
        <div class="title">
          <p>实战成果</p>
          <!--          <div class="more">More >></div>-->
        </div>
        <div class="cont">
          <div class="text">
            <ul>
              <li v-for="item in state.dataList1">
                <p>{{item.acTitle}}</p>
                <span>{{formatDateNoTime(item.createTime)}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <p>通知公告</p>
          <!--          <div class="more">More >></div>-->
        </div>
        <div class="cont">
          <div class="text">
            <ul>
              <li v-for="item in state.dataList2">
                <p>{{item.noticeTitle}}</p>
                <span>{{formatDateNoTime(item.createTime)}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.item {
  .one {
    .tit {
      color: #00afff;
      font-size: 26px;
      margin-bottom: 10px;
    }

    .tip {
      color: #6c6c6c;
      text-indent: 20px;
      padding-bottom: 20px;
      border-bottom: 1px dashed #e5e5e5;
    }
  }

  .cont {
    margin-top: 20px;
    display: flex;

    .text {
      flex: 1;

      ul {

      }

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .imgs {
      width: 500px;

      img {
        width: 500px;
        height: 350px;
      }
    }
  }

  .cont2 {
    flex-direction: column;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    margin-top: 10px;

    .more {
      color: #505050;
    }

    p {
      margin: 0;
      padding-bottom: 10px;
      font-size: 20px;
      position: relative;
      display: inline-block;

      &:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 3px;
        background: #00afff;
        bottom: 0px;
        left: 0;
      }
    }
  }
}

.banner {
  border-radius: 20px;
  overflow: hidden;
  margin: 20px auto !important;
}

.bannerImg {
  position: relative;

  img {
    height: 400px;
    width: 100%;
    object-fit: cover;
  }

  .tip {
    width: 100%;
    height: 40px;
    background: rgba(#000, .7);
    position: absolute;
    z-index: 99;
    bottom: 0;
    left: 0;
    color: #fff;
    line-height: 40px;
    padding-left: 20px;
  }
}

.btns {
  display: flex;

  .btn {
    width: 120px;
    height: 35px;
    background: #1592E6;
    border: 1px solid #1592E6;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 10px;
    margin-right: 20px;
    cursor: pointer;
  }
}

.header {
  height: 80px;
  background: #202481;

  .w1200 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    img {
      height: 80px;
    }
  }
}

.w1200 {
  width: 1200px;
  margin: 0 auto;
}
</style>
